<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/space.css">
    <link rel="stylesheet" href="./css/changePerInfo.css">
    <link rel="stylesheet" href="./css/myalert.css">
    
    <title>个人空间</title>
</head>

<body>
    <!-- header部分 -->
    <header class="sticky_header">
        <div class="header_inner">
            <img src="./img/A.png" alt="A图标">
            <div class="header_title">
                A瓣
            </div>

            <!-- header导航栏 -->
            <div class="navwrap">
                <a href="./index.html" class="nav-link">首页</a>
                <a href="javascript:;" class="nav-link">动态</a>
                <a href="./space.html" class="nav-link nav-link-active">空间</a>
                <a href="javascript:;" class="nav-link">相册</a>
            </div>


            <!-- header右侧 -->
            <div class="header_right">
                <!-- 搜索框 -->
                <form class="header_search">
                    <input type="text">
                    <i></i>
                </form>
                <!-- 用户名称 -->
                <div>
                    <a href="javascript:;" id="name-link">1234</a>
                </div>
                <!-- 用户头像 -->
                <div class="header_avatawrap" id="headerAvata">
                    <div class="avata_img_wrap">
                        <!-- 未登录默认为akarin -->
                        <img src="./img/akarin.jpg" alt="头像" id="avatarPhoto">
                    </div>
                    <div class="userpage">
                        <button onclick="document.getElementById('avatarPhoto').click();" id="userpageBtn">登录</button>
                        <div class="signout">退出登录</div>
                    </div>
                </div>
            </div>
        </div>

    </header>

<!-- 头像 -->
    <div class="page_wraper">
        <div class="container">
            <div class="col-2">
                <div class="usermsg">
                    <div class="space_avatar_wrap">
                        <div class="avatar_shade">点击更换头像</div>
                        <img src="./img/akarin.jpg" alt="用户头像" id="userphoto">
                    </div>
                    
                    <div id="nameuser"></span></div>
                    <div id="userid">userid :</div>
                    <div id="uname"></div>
                </div>
                <div class="album">

                </div>
            </div>
            <div class="col-1">
                <!-- 返回键 -->
                <a class="back_space" onclick="window.history.back();">返回</a>
                <!-- 修改密码 -->
                <div class="changePassword">
                    <div class="title">
                        修改密码
                    </div>
                    <input type="password" placeholder="请输入修改密码" id="newPasswordInput"><br/>
                    <input type="password" placeholder="请再次输入修改密码">
                    <div class="fbInfo"></div>
                    <button id="changePasswordBtn">确定提交</button>
                </div>
                <!-- 上传头像 -->
                <div class="updateAvater">
                    <button onclick="document.getElementById('updateAvater').click();">选择文件</button>
                    <input type="file" id="updateAvater" accept="image/png, image/jpg, image/jpeg, image/gif" style="display: none;">
                    <div class="avatar_preview_wrap">
                        <img src="./img/akarin.jpg" alt="默认头像图片">
                    </div>
                    <button id="updateAvaterBtn" style="display: none;">确认上传</button>
                </div>
            </div>
        </div>

        <script src="./js/api/post.js"></script>
        <script src="./js/api/get.js"></script>
        <script src="./js/login_status.js"></script>
        <script src="./js/untils/myAlert.js"></script>
        <script src="./js/changePerInfo.js"></script>
</body>

</html>